<template>
	<view class="activity">
		<view class="bg-icon"></view>
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback" 
			@emptyclick="emptyClick"
			:down="downOption"
			:up="upOption"
			:top="80"
		>
			<view class="list">
				<!-- 活动item组件 -->
				<activity-item v-for="(item, index) in list" :key="index" :item="item"></activity-item>
			</view>
		</mescroll-body>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import ActivityApi from "@/api/activity.js";
	import activityItem from "./com/activity-item.vue";
	
	export default {
		mixins: [MescrollMixin],
		components: {
			activityItem
		},
		data() {
			return {
				list: [],
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false,
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					// 缺省配置
					empty: {
						btnText: "去首页看看"
					}
				},
			};
		},
		methods:{
			// 下拉刷新回调
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			// 
			async upCallback(page) {
				console.log(page.num)
				// setTimeout(()=> {
				// 	let list = [1,2,3,4,5,6,7,8,9,10]
				// 	this.list = [...this.list, ...list];
				// 	this.mescroll.endSuccess(10, !(this.list.length > 25)); 
				// 	// this.mescroll.endSuccess(0, false); 
				// },1000)
				// return
				try {
					const res = await ActivityApi.getList({page: page.num})
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(res.list); //
					console.log(res)
					this.mescroll.endBySize(res.list.length, res.total)
				} catch(err) {
					this.mescroll.endErr();
				}
			},
			emptyClick() {
				uni.switchTab({
					url: "/pages/tab/home/home"
				})
			}
		}
	}
</script>

<style lang="scss">
	.activity{
		.bg-icon{
			width: 100vw;
			height: 80rpx;
			background-size: 100% 60rpx;
			background-image: $bg-icon-main;
			background-repeat: no-repeat;
			background-position-y: 20rpx;
			background-color: $bg-color-main;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1024;
		}
		.list{
			padding: 0 20rpx;
			padding-bottom: 30rpx;
		}
	}
</style>
